<template>
  <el-table
    :data="tableData"
    border
    style="
      width: 80%;
      margin: 20px;
      border-radius: 8px;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :header-cell-style="{
      background: '#626aef !important',
      color: '#ffffff',
      border: 'none !important',
    }"
  >
    <el-table-column prop="type" label="考核条目类型" />
    <el-table-column prop="target" label="考核条目" />
	<el-table-column prop="scorePercent" label="考核条目占比" >
		<template v-slot="scope">
			{{scope.row.scorePercent}}%
		</template>
	</el-table-column>
    <el-table-column prop="amount1" label="评分">
      <template v-slot="scope">
        <el-input
          style="width: 200px"
          :ref="'inputFocus' + scope.$index"
          v-model="Form[scope.$index].score"
          placeholder="请填写评分（0~120）"
          class="input"
        />&nbsp;&nbsp;分
      </template>
    </el-table-column>
	<el-table-column prop="amount2" label="评分说明">
		<template v-slot="scope">
	      <el-input
			:ref="'inputFocus' + scope.$index"
	        v-model="Form[scope.$index].remark"
	        type="textarea"
	        placeholder="请填写扣分或加分说明"
	        style="width: 100%; float: right"
	      />
		  </template>
	</el-table-column>
  </el-table>
  <el-button
    type="primary"
    @click="submitForm"
    class="button"
    style="margin-left: 30px"
    >提交</el-button
  >
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance } from "vue";
import { getPositionScoreAssessorList } from "@/api/score";
import { addEmpScore } from "@/api/empScore";
import { ElMessage } from "element-plus";

let props = defineProps({
  empId: {
    type: String,
    required: true, //是否规定必须得有
  },
  update: {
    type: Function,
    default: () => {},
  },
  thirdId: {
    type: Number,
    required: true,
  },
  positionId: {
    type: Number,
    required: true,
  },
  type: {
    type: Number,
    required: true,
  },
});

const Form = reactive([]);
const tableData = ref([]);
onBeforeMount(() => {
  let positionId = props.positionId;
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let empId = props.empId;
  getPositionScoreAssessorList({ positionId, assessorId,empId }).then((data) => {
    tableData.value = data.data;
    for (let i = 0; i < tableData.value.length; i++) {
      Form.push({
        empId: props.empId,
        scoreAssessorsId: tableData.value[i].scoreAssessorsId,
        score: "",
		remark:"",
      });
    }
  });
});

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let positionId = props.positionId;
  let empId = props.empId;
  let positionType = props.type;
  addEmpScore({ Form, empId, assessorId, positionId, positionType }).then(
    (data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        props.update("score");
      }
    }
  );
};
</script>
<style lang="scss" scoped>
.button {
  width: 120px;
  height: 40px;
  margin: 10px 220px;
  float: right;
}
</style>
